<template>
  <div class="sms-wrapper">
    <div class="sms-head">
      <div class="sms-item" :class="{'sms-active': isshow === 'template'}" @click="handleItem('template')">短信模板管理</div>
      <div class="sms-item" :class="{'sms-active': isshow === 'smsMass'}" @click="handleItem('smsMass')">短信群发</div>
      <div class="sms-item" :class="{'sms-active': isshow === 'smsLog'}" @click="handleItem('smsLog')">短信记录</div>
    </div>
    <div class="sms-content">
      <template v-if="isshow === 'template'">
        <smsTemplate></smsTemplate>
      </template>
      <template v-if="isshow === 'smsMass'">
        <smsMass></smsMass>
      </template>
      <template v-if="isshow === 'smsLog'">
        <smsLog></smsLog>
      </template>

    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';
import smsTemplate from './smsTemplate.vue';
import smsMass from './smsMass.vue';
import smsLog from './smsLog.vue';

export default defineComponent({
  components: {
    smsTemplate,
    smsMass,
    smsLog
  },
  name: 'SmSType',
  setup() {
    const isshow = ref('template')
    const handleItem = (type: string) => {
      isshow.value = type
    }
    return {
      handleItem,
      isshow,
    }
  }
})
</script>

<style lang="scss" scoped>
.sms-wrapper {
  height: 100%;
  .sms-head {
    height: 40px;
    line-height: 40px;
    background-color: #fff;
    box-shadow: 0 2px 8px #ededed;
    border-radius: 4px;
    display: flex;

    .sms-item {
      text-align: center;
      padding: 0 10px;
      width: 120px;
      cursor: pointer;

    }

    .sms-active {
      border-bottom: 2px solid $mainColor;
    }
  }

  .sms-content {
    margin-top: 10px;
    height: calc(100% - 40px);
  }
}
</style>